<template>
	<view class="uni-content">
		<view class="login-logo">
			<image src="/static/logo.png"></image>
		</view>
		<!-- 顶部文字 -->
		<text class="title title-box text-center text-h6 text-primary">大驾光临，蓬荜生辉</text>
		<uni-forms>
			<uni-forms-item name="username">
				<uni-easyinput :focus="focusUsername" @blur="focusUsername = false" class="input-box"
					:inputBorder="false" v-model="单项.username" placeholder="请输入手机号/用户名" trim="all" prefixIcon="auth" />
			</uni-forms-item>
			<uni-forms-item name="password">
				<uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" clearable
					type="password" :inputBorder="false" v-model="单项.password" placeholder="请输入密码" trim="all"
					prefixIcon="locked" />
			</uni-forms-item>
		</uni-forms>
		<a-captcha v-if="needCaptcha" focus ref="captchaRef" scene="login-by-pwd" v-model="单项" />
		<!-- 带选择框的隐私政策协议组件 -->
		<a-agreements scope="login" ref="agreementsRef" v-model="同意"></a-agreements>
		<button class="uni-btn" type="primary" @click="提交">登录</button>
		<!-- 忘记密码 -->
		<view class="link-box">
			<view v-if="!config.isAdmin">
				<text class="forget">忘记了？</text>
				<text class="link" @click="toRetrievePwd">找回密码</text>
			</view>
			<text class="link" @click="toRegister">{{config.isAdmin ? '注册管理员账号': '注册账号'}}</text>
		</view>
		<!-- 悬浮登录方式组件 -->
		<!-- <uni-id-pages-fab-login ref="uniFabLogin" v-model:同意="同意" :父组件="{agreementsRef}"></uni-id-pages-fab-login> -->
	</view>
</template>

<script setup>
	import config from '@/uni_modules/uni-id-pages/config.js'
	import { onShow } from '@dcloudio/uni-app';
	import { ref, reactive } from 'vue';
	import use_user from "@/stores/use_user.js"
	const user = use_user()

	const { next } = defineProps({
		next: String
	})

	const 单项 = reactive({})

	const needAgreements = ref(true);
	const needCaptcha = ref(true);
	const agreementsRef = ref();
	const captchaRef = ref();
	const 同意 = ref(false);
	const focusUsername = ref(false);
	const focusPassword = ref(false);

	onShow(() => {
		// #ifdef H5
		document.onkeydown = event => {
			const e = event || window.event;
			if (e && e.keyCode === 13) { // 回车键的键值为13
				提交();
			}
		};
		// #endif
	});

	// 页面跳转，找回密码
	const toRetrievePwd = () => {
		uni.showToast({
			title: '请联系管理员 或者 老鱼😀',
		})
		return
		let url = '/uni_modules/uni-id-pages/pages/retrieve/retrieve';
		// 如果刚好用户名输入框的值为手机号码，就把它传到retrieve页面，根据该手机号找回密码
		if (/^1\d{10}$/.test(单项.username)) {
			url += `?phoneNumber=${单项.username}`;
		}
		uni.navigateTo({
			url
		});
	};

	// 密码登录
	const 提交 = async () => {
		if (!单项.password) {
			focusPassword.value = true;
			return uni.showToast({
				title: '请输入密码',
				icon: 'none',
				duration: 3000
			});
		}
		if (!单项.username) {
			focus单项.username = true;
			return uni.showToast({
				title: '请输入手机号/用户名',
				icon: 'none',
				duration: 3000
			});
		}
		if (needCaptcha.value && !单项.captcha) {
			// captchaRef.value.getImageCaptcha();
			return uni.showToast({
				title: '请输入验证码',
				icon: 'none',
				duration: 3000
			});
		}

		if (needAgreements.value && !同意.value) {
			return agreementsRef.value.popup(登录);
		}
		登录()
	};

	const 登录 = async () => {
		const res = await user.登录(单项, next)
		if (res.code != 0) captchaRef.value.getImageCaptcha()
	};

	const toRegister = () => {
		let url = config.isAdmin ? '/uni_modules/uni-id-pages/pages/register/register-admin' :
			'/uni_modules/uni-id-pages/pages/register/register'
		// url = url + '?next=/' + next
		url = url + '?next=' + next
		uni.navigateTo({
			url,
			fail(e) {
				console.log('跳转注册页出错 e: ', e);
				console.error(e);
			}
		})
	}
</script>

<style lang="scss" scoped>
	@import "@/uni_modules/uni-id-pages/common/login-page.scss";

	@media screen and (min-width: 690px) {
		.uni-content {
			height: auto;
		}
	}

	.forget {
		font-size: 12px;
		color: #8a8f8b;
	}

	.link-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20px;
	}

	.link {
		font-size: 12px;
	}
</style>